<template>
    <div class="productList">
        <div class="list_item" v-for="item in producArr" :class="{ 'active-bg': item.isSale == '1' }">
            <div class="item_text" style="font-weight: 700;">产品名称：{{ item.productName }}</div>
            <div class="item_text">产品类别：{{ item.typeName }}</div>
            <div class="two_item">
                <div class="two_text">指导价格：{{ item.guidePrice == 0?null:item.guidePrice }}</div>
                <div class="two_text">指导业绩：{{ item.guideAchievement == 0?null:item.guideAchievement }}</div>
            </div>

            <div class="two_item">
                <div class="two_text">门店标价：<span style="color:#ff6a00">{{ item.busPrice }}</span></div>
                <div class="two_text">门店业绩：<span style="color:#ff6a00">{{ item.busAchievement }}</span></div>
            </div>
            <div class="item_text">产品格豆：{{ item.beans == 0?null:item.beans }}</div>

            <div class="item_text">产品备注：{{ item.remarks }}</div>
            <image src="/static/images/antFill-edit 1@1x.png" alt="" class="edit" @tap="navigateToEdit(item)" />
        </div>


    </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    producArr: {
        type: Array,
        default: () => []
    }
})

// 路由跳转并传值
const navigateToEdit = (item) => {
    // 将对象转换为JSON字符串并编码
    const itemStr = encodeURIComponent(JSON.stringify(item))
    // 使用查询参数方式传递
    uni.navigateTo({
        url: `/pages/editProduct/editProduct?item=${itemStr}`
    })
}



</script>


<style lang="scss">
.productList {
    margin-top: 10rpx;
}

.list_item {
    width: 100%;
    // height: 360rpx;
    padding: 20rpx 42rpx;
    background-color: #fff;
    border-bottom: 1px solid rgba(239, 239, 239, 1);
    position: relative;

    .edit {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        bottom: 20rpx;
        right: 120rpx;

    }
}

.list_item:first-child {
    border-top: 1px solid rgba(239, 239, 239, 1);
    ;
}

.active-bg {
    background-color: rgba(222, 134, 143, 0.11);
}

.item_text {
    color: rgba(108, 108, 108, 1);
    font-size: 28rpx;
    // font-family: PingFangSC-regular
}

.two_item {
    display: flex;
    align-items: center;
    width: 100%;

    .two_text {
        color: rgba(108, 108, 108, 1);
        font-size: 28rpx;

        width: 50%;

    }
}
</style>